<template>
  <div class="tutorial-study-page">
    <div class="study-container" v-loading="loading">
      <!-- 顶部工具栏 -->
      <div class="study-header">
        <div class="header-left">
          <el-button @click="handleExit" :icon="ArrowLeft" circle title="退出学习" />
          <div class="tutorial-info">
            <h2>{{ tutorialTitle }}</h2>
            <div class="progress-info">
              <span>第 {{ currentStepNumber }} 步</span>
              <span class="separator">|</span>
              <span>共 {{ totalSteps }} 步</span>
            </div>
          </div>
        </div>
        
        <div class="header-right">
          <div class="progress-bar">
            <el-progress 
              :percentage="progressPercentage" 
              :stroke-width="6"
              :show-text="false"
            />
            <span class="progress-text">{{ progressPercentage }}%</span>
          </div>
          <el-button @click="handleBookmark" :icon="Collection" circle title="收藏" />
          <el-button @click="handleFullscreen" :icon="FullScreen" circle title="全屏" />
        </div>
      </div>

      <!-- 无数据提示 -->
      <div class="no-data-content" v-if="!loading && steps.length === 0" style="text-align: center; padding: 50px;">
        <el-empty description="没有找到教程步骤数据">
          <p>教程ID: {{ tutorialId }}</p>
          <p>请检查教程是否存在或联系管理员</p>
          <el-button type="primary" @click="$router.push('/tutorial')">返回教程列表</el-button>
        </el-empty>
      </div>

      <!-- 学习内容区 -->
      <div class="study-content" v-if="currentStep">
        <!-- 步骤导航 -->
        <div class="step-navigation">
          <div class="nav-buttons">
            <el-button 
              @click="previousStep" 
              :disabled="currentStepIndex === 0"
              :icon="ArrowLeft"
            >
              上一步
            </el-button>
            <el-button 
              @click="nextStep" 
              :disabled="currentStepIndex === steps.length - 1"
              type="primary"
              :icon="ArrowRight"
            >
              下一步
            </el-button>
          </div>
          
          <!-- 步骤指示器 -->
          <div class="step-indicators">
            <div 
              v-for="(step, index) in steps" 
              :key="step.id"
              class="step-indicator"
              :class="{ 
                'active': index === currentStepIndex,
                'completed': index < currentStepIndex 
              }"
              @click="goToStep(index)"
            >
              <div class="indicator-number">
                <el-icon v-if="index < currentStepIndex"><Check /></el-icon>
                <span v-else>{{ index + 1 }}</span>
              </div>
              <div class="indicator-title">{{ step.title }}</div>
            </div>
          </div>
        </div>

        <!-- 当前步骤内容 -->
        <div class="current-step">
          <div class="step-header">
            <h3>第 {{ currentStep.stepNumber }} 步: {{ currentStep.title }}</h3>
            <div class="step-actions">
              <el-button @click="toggleNotes" :icon="Edit" size="small">笔记</el-button>
              <el-button @click="markAsCompleted" :icon="Check" size="small" type="success">
                {{ isCurrentStepCompleted ? '已完成' : '标记完成' }}
              </el-button>
            </div>
          </div>

          <div class="step-content-wrapper">
            <!-- 媒体内容 -->
            <div class="step-media">
              <!-- 步骤视频 -->
              <div class="video-container" v-if="currentStep.videoUrl">
                <video 
                  ref="videoPlayer"
                  :src="currentStep.videoUrl" 
                  controls 
                  :poster="currentStep.imageUrl"
                  @timeupdate="handleVideoProgress"
                  @ended="handleVideoEnded"
                >
                  您的浏览器不支持视频播放
                </video>
                <div class="video-controls">
                  <el-button @click="togglePlayPause" :icon="videoPlaying ? VideoPause : VideoPlay" size="small">
                    {{ videoPlaying ? '暂停' : '播放' }}
                  </el-button>
                  <span class="video-time" v-if="currentStep.videoDuration">
                    {{ formatTime(currentVideoTime) }} / {{ formatTime(currentStep.videoDuration) }}
                  </span>
                </div>
              </div>

              <!-- 步骤图片 -->
              <div class="image-container" v-else-if="currentStep.imageUrl">
                <img :src="currentStep.imageUrl" :alt="currentStep.title" />
                <div class="image-zoom">
                  <el-button @click="showImagePreview" :icon="ZoomIn" circle />
                </div>
              </div>
            </div>

            <!-- 文字内容 -->
            <div class="step-text">
              <div class="step-description">
                <h4>步骤说明</h4>
                <div class="description-content" v-html="currentStep.description"></div>
              </div>

              <!-- 小贴士 -->
              <div class="step-tips" v-if="currentStep.tips">
                <h4><el-icon><InfoFilled /></el-icon> 小贴士</h4>
                <div class="tips-content">{{ currentStep.tips }}</div>
              </div>

              <!-- 用户笔记 -->
              <div class="user-notes" v-show="showNotes">
                <h4><el-icon><Edit /></el-icon> 我的笔记</h4>
                <el-input
                  v-model="currentStepNotes"
                  type="textarea"
                  :rows="4"
                  placeholder="在这里记录您的学习心得和笔记..."
                  @blur="saveNotes"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 学习统计 -->
        <div class="study-stats">
          <div class="stats-grid">
            <div class="stat-item">
              <el-icon><Clock /></el-icon>
              <div>
                <span class="stat-label">学习时长</span>
                <span class="stat-value">{{ formatTime(studyDuration) }}</span>
              </div>
            </div>
            <div class="stat-item">
              <el-icon><TrendCharts /></el-icon>
              <div>
                <span class="stat-label">学习进度</span>
                <span class="stat-value">{{ progressPercentage }}%</span>
              </div>
            </div>
            <div class="stat-item">
              <el-icon><Check /></el-icon>
              <div>
                <span class="stat-label">完成步骤</span>
                <span class="stat-value">{{ completedSteps }} / {{ totalSteps }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 完成页面 -->
      <div class="completion-page" v-if="isCompleted">
        <div class="completion-content">
          <div class="completion-icon">
            <el-icon><Trophy /></el-icon>
          </div>
          <h2>恭喜您完成了本教程！</h2>
          <p>您已经成功学完了《{{ tutorialTitle }}》的所有步骤</p>
          
          <div class="completion-stats">
            <div class="stat-card">
              <div class="stat-number">{{ totalSteps }}</div>
              <div class="stat-label">完成步骤</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ formatTime(studyDuration) }}</div>
              <div class="stat-label">学习时长</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">100%</div>
              <div class="stat-label">完成度</div>
            </div>
          </div>

          <div class="completion-actions">
            <el-button type="primary" @click="handleRestart" :icon="Refresh">
              重新学习
            </el-button>
            <el-button @click="goToTutorialDetail" :icon="View">
              查看详情
            </el-button>
            <el-button @click="findMoreTutorials" :icon="Search">
              更多教程
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imagePreviewVisible"
      :url-list="[currentStep?.imageUrl || '']"
      @close="imagePreviewVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ArrowLeft, ArrowRight, Collection, FullScreen, Check, Edit, InfoFilled,
  Clock, TrendCharts, Trophy, Refresh, View, Search, ZoomIn,
  VideoPlay, VideoPause
} from '@element-plus/icons-vue'
import { tutorialApi, tutorialStepApi, userStudyApi } from '@/api'
import { useUserStore } from '@/stores/user'
import type { Tutorial, TutorialStep, UserStudy } from '@/types/common'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(true)
const tutorialTitle = ref('')
const steps = ref<TutorialStep[]>([])
const currentStepIndex = ref(0)
const studyDuration = ref(0)
const startTime = ref(Date.now())
const timerInterval = ref<number>()
const studyRecord = ref<UserStudy | null>(null)
const completedStepsSet = ref<Set<number>>(new Set())

// 视频相关
const videoPlayer = ref<HTMLVideoElement>()
const videoPlaying = ref(false)
const currentVideoTime = ref(0)

// 交互状态
const showNotes = ref(false)
const currentStepNotes = ref('')
const imagePreviewVisible = ref(false)

// 计算属性
const tutorialId = computed(() => Number(route.params.id))
const currentStep = computed(() => steps.value[currentStepIndex.value])
const currentStepNumber = computed(() => currentStep.value?.stepNumber || 1)
const totalSteps = computed(() => steps.value.length)
const completedSteps = computed(() => completedStepsSet.value.size)
const progressPercentage = computed(() => {
  if (totalSteps.value === 0) return 0
  return Math.round((completedSteps.value / totalSteps.value) * 100)
})
const isCurrentStepCompleted = computed(() => 
  currentStep.value ? completedStepsSet.value.has(currentStep.value.id) : false
)
const isCompleted = computed(() => completedSteps.value === totalSteps.value && totalSteps.value > 0)

// 获取教程和步骤数据
const fetchData = async () => {
  if (!tutorialId.value) {
    ElMessage.error('教程ID不存在')
    return
  }

  loading.value = true
  try {
    const [tutorialResponse, stepsResponse] = await Promise.all([
      tutorialApi.getTutorialDetail(tutorialId.value),
      tutorialStepApi.getTutorialSteps(tutorialId.value)
    ])

    const tutorialData = tutorialResponse.data
    tutorialTitle.value = tutorialData.title || tutorialData.tutorial?.title || '未知教程'

    // 处理步骤数据
    let stepData = stepsResponse.data
    if (Array.isArray(stepData)) {
      steps.value = stepData.sort((a, b) => a.stepNumber - b.stepNumber)
    } else {
      steps.value = []
    }

    // 获取学习记录
    if (userStore.isLoggedIn) {
      try {
        const studyResponse = await userStudyApi.getTutorialStudyRecord(tutorialId.value)
        const record = studyResponse.data
        
        if (record && record.id) {
          studyRecord.value = record
          currentStepIndex.value = Math.max(0, record.currentStep - 1)
          studyDuration.value = record.studyDuration || 0
          
          // 标记已完成的步骤
          completedStepsSet.value.clear()
          for (let i = 0; i < record.currentStep - 1; i++) {
            if (steps.value[i]) {
              completedStepsSet.value.add(steps.value[i].id)
            }
          }
          
          // 更新学习记录的最后学习时间
          await saveStudyRecord()
        } else {
          // 立即创建初始学习记录
          await createInitialStudyRecord()
        }
      } catch (error) {
        // 即使获取失败，也尝试创建新记录
        if (steps.value.length > 0) {
          await createInitialStudyRecord()
        }
      }
    }

    startTimer()
    
    // 检查是否有步骤数据，如果没有则提示用户
    if (steps.value.length === 0) {
      ElMessage.warning('当前教程暂无步骤数据，建议访问教程1进行学习')
      setTimeout(() => {
        ElMessageBox.confirm(
          '当前教程(ID: ' + tutorialId.value + ')暂无学习步骤数据。是否跳转到有完整数据的教程1？',
          '提示',
          {
            confirmButtonText: '跳转到教程1',
            cancelButtonText: '返回教程列表',
            type: 'warning'
          }
        ).then(() => {
          router.push('/tutorial/1/study')
        }).catch(() => {
          router.push('/tutorial')
        })
      }, 2000)
    }
    
  } catch (error) {
    ElMessage.error('获取教程数据失败')
  } finally {
    loading.value = false
  }
}

// 开始计时
const startTimer = () => {
  timerInterval.value = setInterval(() => {
    studyDuration.value = Math.floor((Date.now() - startTime.value) / 1000)
  }, 1000)
}

// 停止计时
const stopTimer = () => {
  if (timerInterval.value) {
    clearInterval(timerInterval.value)
    timerInterval.value = undefined
  }
}

// 创建初始学习记录
const createInitialStudyRecord = async () => {
  if (!userStore.isLoggedIn || steps.value.length === 0) {
    return
  }
  
  if (!tutorialId.value || isNaN(tutorialId.value)) {
    return
  }

  try {
    const recordData = {
      tutorialId: tutorialId.value,
      currentStep: 1,
      totalSteps: totalSteps.value,
      progress: 0,
      studyDuration: 0,
      isCompleted: false,
      lastStudyTime: formatDateTime()
    }

    const response = await userStudyApi.saveStudyRecord(recordData)
    
    if (response.data) {
      studyRecord.value = response.data
      ElMessage.success('开始学习，已记录您的学习进度')
    }
  } catch (error: any) {
    // 静默处理错误
  }
}

// 保存学习记录
const saveStudyRecord = async () => {
  if (!userStore.isLoggedIn || steps.value.length === 0) {
    return
  }
  
  if (!tutorialId.value || isNaN(tutorialId.value)) {
    return
  }

  try {
    const recordData: any = {
      tutorialId: tutorialId.value,
      currentStep: currentStepIndex.value + 1,
      totalSteps: totalSteps.value,
      progress: progressPercentage.value,
      studyDuration: studyDuration.value,
      isCompleted: isCompleted.value,
      completedTime: isCompleted.value ? formatDateTime() : undefined,
      lastStudyTime: formatDateTime()
    }

    const response = await userStudyApi.saveStudyRecord(recordData)
    
    // 更新本地记录
    if (response.data) {
      studyRecord.value = response.data
    }
    
  } catch (error: any) {
    // 只在关键操作时提示用户
    if (isCompleted.value) {
      ElMessage.error('保存学习记录失败')
    }
  }
}

// 步骤导航
const previousStep = () => {
  if (currentStepIndex.value > 0) {
    currentStepIndex.value--
    loadStepNotes()
  }
}

const nextStep = () => {
  if (currentStepIndex.value < steps.value.length - 1) {
    currentStepIndex.value++
    loadStepNotes()
  }
}

const goToStep = (index: number) => {
  currentStepIndex.value = index
  loadStepNotes()
}

// 标记步骤完成
const markAsCompleted = () => {
  if (!currentStep.value) return

  if (isCurrentStepCompleted.value) {
    completedStepsSet.value.delete(currentStep.value.id)
    ElMessage.success('已取消完成标记')
  } else {
    completedStepsSet.value.add(currentStep.value.id)
    ElMessage.success('已标记为完成')
  }

  saveStudyRecord()
}

// 视频控制
const togglePlayPause = () => {
  if (!videoPlayer.value) return

  if (videoPlayer.value.paused) {
    videoPlayer.value.play()
    videoPlaying.value = true
  } else {
    videoPlayer.value.pause()
    videoPlaying.value = false
  }
}

const handleVideoProgress = () => {
  if (!videoPlayer.value) return
  currentVideoTime.value = videoPlayer.value.currentTime
}

const handleVideoEnded = () => {
  videoPlaying.value = false
  // 自动标记当前步骤为完成
  if (currentStep.value && !isCurrentStepCompleted.value) {
    markAsCompleted()
    ElMessage.success('视频学习完成，已自动标记为完成')
  }
}

// 笔记功能
const toggleNotes = () => {
  showNotes.value = !showNotes.value
  if (showNotes.value) {
    loadStepNotes()
  }
}

const loadStepNotes = () => {
  // TODO: 从本地存储或服务器加载笔记
  const key = `notes_${tutorialId.value}_${currentStep.value?.id}`
  currentStepNotes.value = localStorage.getItem(key) || ''
}

const saveNotes = () => {
  if (!currentStep.value) return
  
  // TODO: 保存笔记到本地存储或服务器
  const key = `notes_${tutorialId.value}_${currentStep.value.id}`
  localStorage.setItem(key, currentStepNotes.value)
  ElMessage.success('笔记已保存')
}

// 其他功能
const handleBookmark = () => {
  // TODO: 实现收藏功能
  ElMessage.success('已收藏')
}

const handleFullscreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    document.documentElement.requestFullscreen()
  }
}

const showImagePreview = () => {
  imagePreviewVisible.value = true
}

const handleExit = async () => {
  try {
    await ElMessageBox.confirm('确定要退出学习吗？您的学习进度将会保存。', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await saveStudyRecord()
    router.push(`/tutorial/${tutorialId.value}`)
  } catch {
    // 用户取消
  }
}

const handleRestart = async () => {
  try {
    await ElMessageBox.confirm('确定要重新开始学习吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    currentStepIndex.value = 0
    completedStepsSet.value.clear()
    studyDuration.value = 0
    startTime.value = Date.now()
    loadStepNotes()
  } catch {
    // 用户取消
  }
}

const goToTutorialDetail = () => {
  router.push(`/tutorial/${tutorialId.value}`)
}

const findMoreTutorials = () => {
  router.push('/tutorial')
}

// 工具函数
const formatTime = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
  } else {
    return `${minutes}:${String(secs).padStart(2, '0')}`
  }
}

// 格式化日期时间为后端期望的格式
const formatDateTime = (date: Date = new Date()) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 监听步骤变化
watch(currentStepIndex, () => {
  saveStudyRecord()
  
  // 重置视频状态
  videoPlaying.value = false
  currentVideoTime.value = 0
  
  nextTick(() => {
    if (videoPlayer.value) {
      videoPlayer.value.currentTime = 0
    }
  })
})

// 监听学习完成状态
watch(isCompleted, (newValue, oldValue) => {
  if (newValue && !oldValue) {
    // 刚刚完成学习
    setTimeout(() => {
      ElMessage({
        message: '🎉 恭喜您完成了本教程的学习！',
        type: 'success',
        duration: 3000
      })
    }, 500)
    
    // 立即保存完成状态
    saveStudyRecord()
  }
})

// 定期保存学习记录
const saveInterval = setInterval(saveStudyRecord, 30000) // 每30秒保存一次

onMounted(() => {
  fetchData()
})

onUnmounted(() => {
  stopTimer()
  saveStudyRecord()
  clearInterval(saveInterval)
})

// 页面离开前保存
window.addEventListener('beforeunload', saveStudyRecord)
</script>

<style scoped>
.tutorial-study-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.study-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部工具栏 */
.study-header {
  background: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tutorial-info h2 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px;
}

.progress-info {
  font-size: 14px;
  color: #666;
}

.separator {
  margin: 0 8px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.progress-text {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

/* 学习内容区 */
.study-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

/* 步骤导航 */
.step-navigation {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-indicators {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0;
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  cursor: pointer;
  transition: all 0.3s;
}

.step-indicator:hover {
  transform: translateY(-2px);
}

.indicator-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.step-indicator.active .indicator-number {
  background: #43a047;
  color: #fff;
}

.step-indicator.completed .indicator-number {
  background: #4caf50;
  color: #fff;
}

.step-indicator:not(.active):not(.completed) .indicator-number {
  background: #f0f0f0;
  color: #666;
}

.indicator-title {
  font-size: 12px;
  text-align: center;
  color: #666;
  line-height: 1.3;
}

.step-indicator.active .indicator-title {
  color: #43a047;
  font-weight: bold;
}

/* 当前步骤 */
.current-step {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.step-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.step-actions {
  display: flex;
  gap: 8px;
}

.step-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: 400px;
}

/* 媒体内容 */
.step-media {
  position: relative;
}

.video-container {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: auto;
}

.video-controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 12px;
  border-radius: 6px;
}

.video-time {
  color: #fff;
  font-size: 12px;
}

.image-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.image-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-container:hover .image-zoom {
  opacity: 1;
}

/* 文字内容 */
.step-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-description h4,
.step-tips h4,
.user-notes h4 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.description-content {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.step-tips {
  background: #fff9c4;
  border: 1px solid #ffd54f;
  border-radius: 8px;
  padding: 16px;
}

.tips-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.user-notes {
  background: #f0f8ff;
  border: 1px solid #e3f2fd;
  border-radius: 8px;
  padding: 16px;
}

/* 学习统计 */
.study-stats {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
}

.stat-item .el-icon {
  font-size: 24px;
  color: #43a047;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.stat-value {
  display: block;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

/* 完成页面 */
.completion-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.completion-content {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 60px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 500px;
}

.completion-icon {
  font-size: 80px;
  color: #ffd700;
  margin-bottom: 20px;
}

.completion-content h2 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

.completion-content p {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.completion-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  text-align: center;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  min-width: 80px;
}

.stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #43a047;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.completion-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .study-header {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .study-content {
    padding: 16px;
  }

  .step-content-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .step-indicators {
    justify-content: center;
  }

  .step-indicator {
    min-width: 60px;
  }

  .indicator-number {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .completion-content {
    padding: 40px 20px;
  }

  .completion-stats {
    flex-direction: column;
    align-items: center;
  }

  .completion-actions {
    flex-direction: column;
  }
}
</style>
